<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		#login {
			background-color: skyblue;
		}

		#resigter {
			background-color: pink;
		}
	</style>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<!-- v-once是只生成一次，此时如果在控制台更改app.msg的值则它并不会改变 -->
		<h1 v-once>{{msg}}</h1>
		<!-- 还可以插入HTML文本 -->
		<h1>{{htmlTxt}}</h1>
		<h1 v-html="htmlTxt"></h1>
		<!-- 但是这样做非常危险，很容易受到XSS攻击，例如htmlTxt变量的内容如果是一个脚本的话,可能会被执行一些恶意操作 -->

		<!-- 动态属性绑定，v-bind可简写为一个冒号 -->
		<div v-bind:id="idName">
			<h1>登录</h1>
		</div>
		<div :id="idName">
			<h1>登录</h1>
		</div>

		<!-- 表达式应用 -->
		<h1>{{firstname + lastname}}</h1>

		<!-- 三元运算符 -->
		<div id="">
			{{isVip?"欢迎VIP用户":"普通用户请充值"}}
		</div>

		<!-- 事件绑定 -->
		<div id="">
			<button type="button" v-on:click="changeBg">改变背景</button>
			<button type="button" @click="changeBg">改变背景</button>
		</div>
	</div>

	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: {
				msg: "hello Vue",
				htmlTxt: "<span>hello</span>",
				idName: "login",
				firstname: "张",
				lastname: "三",
				isVip: true
			},
			methods: {
				changeBg: function () {
					document.body.style.background = "skyblue";
				}
			}
		})
	</script>
</body>

</html>